<template>
    <div class="container">
        <a-spin :spinning="loading">
            <a-list item-layout="vertical" :data-source="list" :locale="{emptyText: '暂无数据'}">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta>
                        <a slot="title" @click="openPagePage(item.url)">
                            {{ item.title }}
                        </a>
                        <div slot="description">
                            {{ item.create_time }}
                        </div>
                    </a-list-item-meta>
                    <div slot="extra" class="list-menu">
                        <div style="width: 150px;">
                            <a-button class="list-menu-btn" block @click="openPagePage(item.url)">在页面中显示</a-button>
                        </div>
                        <div style="margin-top: 5px; width: 150px; display: flex; flex-direction: row; justify-content: space-between;">
                            <a-button type="primary" class="list-menu-btn" style="width: 70px;" @click="onEditClick(item.id)">编辑</a-button>
                            <a-popconfirm
                                    title="确认要删除这个页面？？"
                                    ok-text="是"
                                    cancel-text="不"
                                    @confirm="commitDelete(item.id)"
                                >
                                    <a-button type="danger" class="list-menu-btn" style="width: 70px;">删除</a-button>
                                </a-popconfirm>
                        </div>
                    </div>
                </a-list-item>
            </a-list>
            <a-pagination
                size="small"
                :total="total"
                v-model="page"
                :pageSize="limit"
                hideOnSinglePage
                @change="getList"
                :item-render="(current, type, originalElement) => {
                    if (['prev', 'next'].includes(type)) {
                        return '';
                    } else {
                        return originalElement;
                    }
                }"
            />
        </a-spin>
    </div>
</template>
<script>
import { getPageList, deletePage } from '../../../api/page.js'
import { openPagePage } from '../../../utils/url'
export default {
    name: 'Blogs',
    data() {return {
        list: [],
        page: 1,
        limit: 7,
        total: 0,
        loading: false
    }},
    mounted() {
        this.getList()
    },
    methods: {
        commitDelete(id) {
            this.loading = true
            deletePage({id: id}).then(res => {
                this.loading = false
                this.getList()
            }).catch(e => {
                this.loading = false
                this.$message.error(e.msg)
            })
        },
        onEditClick(id) {
            this.$router.push({
                path: '/page/new',
                query: {
                    id: id
                }
            })
        },
        openPagePage(id) {
            openPagePage(id)
        },
        getList() {
            const d = {
                page: this.page,
                limit: this.limit
            }
            this.loading = true
            getPageList(d).then(res => {
                this.loading = false
                this.list = res.data.data
                this.total = res.data.count
            }).catch(e => {
                this.loading = false
                console.error(e)
                this.$message.error(e.msg)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    padding: 40px 0 0 20px;
}
.list-menu {
    margin-right: 10px;
}
.ant-pagination-next {
    display: none !important;
}
</style>


